<template>
	<view style="padding-bottom: 120rpx;">

		<z-nav-bar :bgColor="['#3699ff', '#0075ee']" bgColorAngle="90" fontColor="#FFF" homeState="2000"
			backState="1000">
			<view class="title-box">
				<text>同行管理</text>
			</view>
		</z-nav-bar>

		<u-sticky :offsetTop="offsetTop">
			<view class="searchBox">
				<view class="search">
					<u--input v-model="keyword" clearable border="none" fontSize="12" placeholder="输入同行名称查询"
						@blur="isSearch = false" @focus="isSearch = true" @change="searchChange" prefixIcon="search"
						prefixIconStyle="font-size: 22px;color: #909399" />
				</view>
			</view>
		</u-sticky>

		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="customerItem" v-for="(item,index) in list" :key="index">
				<view class="text-line">
					<text class="text-name">同行名称:</text>
					<text class="text-value">{{item.name|filterNull}}</text>
				</view>
				<view class="text-line">
					<text class="text-name">联系人:</text>
					<text class="text-value">{{item.contact|filterNull}}</text>
				</view>
				<view class="text-line">
					<text class="text-name">联系电话:</text>
					<text class="text-value">{{item.phone|filterNull}}</text>
				</view>
				<view class="text-line">
					<text class="text-name">公司电话:</text>
					<text class="text-value">{{item.companyPhone|filterNull}}</text>
				</view>
				<view class="text-line">
					<text class="text-name">公司地址:</text>
					<text class="text-value">{{item.companyAddress|filterNull}}</text>
				</view>
				<view class="text-line">
					<text class="text-name">备注:</text>
					<text class="text-value">{{item.remark|filterNull}}</text>
				</view>
               
				<u-line color="#efefef" margin="20rpx 0"></u-line>
				<view class="flex-row-end">
					<view class="btn-detail" @click.stop="btnClick(1,item)">
						编辑
					</view>
					<view class="btn-detail" @click.stop="btnClick(2,item)">
						删除
					</view>

				</view>

			</view>
		</mescroll-body>
     
		<button type="info" class="sub-btn" @click="addPeer">添加同行</button>
		
		
	</view>
</template>

<script>
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
	import * as secondedApi from '@/api/seconded-api.js';
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				offsetTop: 0,
				isSearch: false,
				list: [],
				keyword : ''

			};
		},
		onLoad(option) {
			//获取手机状态栏高度
			this.offsetTop = uni.getSystemInfoSync()['statusBarHeight'] + (92 / 750 * uni.getSystemInfoSync()
				.windowWidth) - 0.5;
				console.log(this.popTop);
			uni.$on('refreshSecondedList',()=>{
				this.mescroll.triggerDownScroll();
			})
		},
		
		methods: {
			upCallback(page) {
				var params = {
					pageNum: page.num,
					pageSize: page.size,
					name : this.keyword
				}
				secondedApi.peerList(this.toParams(params)).then(res => {
					//设置列表数据
					if (page.num == 1) this.list = []; //如果是第一页需手动制空列表
					this.list = this.list.concat(res.rows); //追加新数据
					this.mescroll.endBySize(res.rows.length, res.total);
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			//搜索
			searchChange(value) {
				this.mescroll.triggerDownScroll();
			},
			changeStatus(item) {
				this.currentStatus = item;
				this.showStatus = !this.showStatus;
				this.mescroll.triggerDownScroll();
			},
			// 编辑|删除|详情
			btnClick(type, item) {
				switch (type) {
					case 1: //编辑
						uni.navigateTo({
							url: './addPeer?type=1' + '&id=' + item.id
						})
						break;
					case 2: //删除
				        this.deletePeer(item.id)
						break;
					default:
						break;
				}
			},
			deletePeer(id) {
			   uni.showModal({
			   	title: '提示',
			   	content: '确认删除该客户吗?',
			   	cancelText: '取消',
			   	confirmText: '确认',
			   	success: (res) => {
			   		if (res.confirm) {
			   			secondedApi.deletePeer(id).then(res1=>{
							if(res1.code == 200) {
								this.mescroll.triggerDownScroll();
							}
						})
			   		}
			   	}
			   })
			},
			// 新增同行
			addPeer() {
				uni.navigateTo({
					url: './addPeer?type=0'
				})
			}

		}
	};
</script>

<style lang="scss" scoped>
	
	.searchBox {
		padding: 20upx;
		display: flex;
		align-items: center;
		// background-color: #fff;
		background: linear-gradient(90deg, #3599FF 0%, #0275ED 100%);
	
		.city {
			font-size: 28rpx;
			color: #fff;
			margin-right: 8rpx;
		}
	
		.search {
			flex: 1;
			padding: 0 20upx;
			margin: 0 20upx;
			height: 60upx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 24upx;
			background-color: #ffffff;
			border-radius: 30rpx;
		}
	}
	
	
	.customerItem {
		background: #FFFFFF;
		border-radius: 16rpx;
		margin:0 20rpx;
		margin-top: 20rpx;
		padding: 24rpx;
		color: #666;
		font-size: 28rpx;
	}

	.btn-detail {
		width: 180rpx;
		height: 60rpx;
		border-radius: 50rpx;
		color: white;
		text-align: center;
		background-color: $uni-color-primary;
		font-size: 26rpx;
		line-height: 60rpx;
		margin: 10rpx 20rpx 10rpx;
	}
</style>
